
export const Editable = {
    name: "editable",
    props: [],
    events: [],
    render(moveable, React) {
        const rect = moveable.getRect();
        const { pos2 } = moveable.state;
        const EditableViewer = moveable.useCSS("div", `
        {
            position: absolute;
            left: 0px;
            top: 0px;
            will-change: transform;
            transform-origin: 0px 0px;
        }
        .custom-button {
            width: 24px;
            height: 24px;
            margin-bottom: 4px;
            background: #4af;
            border-radius: 4px;
            appearance: none;
            border: 0;
            color: white;
            font-weight: bold;
        }
            `);
        return React.createElement(EditableViewer, {
            key: "editable-viewer",
            className: "moveable-editable",
            style: {
                transform: `translate(${pos2[0]}px, ${pos2[1]}px) rotate(${rect.rotation}deg) translate(10px)`
            }
        }, [
            "\n            ",
            React.createElement("button", {
                className: "custom-button",
                onClick: () => {
                    alert("+");
                }
            }, [
                "+"
            ]),
            "\n            ",
            React.createElement("button", {
                className: "custom-button",
                onClick: (e) => {
                    console.error(moveable)
                    alert("-");
                }
            }, [
                "-"
            ]),
            "\n        "
        ]);
    }
};

export const DimensionViewable = {
    name: "dimensionViewable",
    props: [],
    events: [],
    render(moveable, React) {
        const rect = moveable.getRect();
        return React.createElement("div", {
            key: "dimension-viewer",
            className: "moveable-dimension",
            style: {
                position: "absolute",
                left: `${rect.width / 2}px`,
                top: `${rect.height + 20}px`,
                background: "#4af",
                borderRadius: "2px",
                padding: "2px 4px",
                color: "white",
                fontSize: "13px",
                whiteSpace: "nowrap",
                fontWeight: "bold",
                willChange: "transform",
                transform: `translate(-50%, 0px)`
            }
        }, [
            "\n            ",
            Math.round(rect.offsetWidth),
            " x ",
            Math.round(rect.offsetHeight),
            "\n        "
        ]);
    }
};

export const DraggableHandle = {
    name: "draggableHandle",
    props: [],
    events: [],
    render(moveable, React) {
        const rect = moveable.getRect();
        return React.createElement("div", {
            key: "draggableHandle-viewer",
            className: "moveable-draggableHandle",
            style: {
                position: "absolute",
                left: `${rect.width / 2}px`,
                top: `${-30}px`,
                background: "#4af",
                borderRadius: "2px",
                padding: "2px 4px",
                color: "white",
                fontSize: "13px",
                whiteSpace: "nowrap",
                fontWeight: "bold",
                willChange: "transform",
                transform: `translate(-50%, 0px)`
            }
        }, [
            "\n            Target\n        "
        ]);
    }
};
